<template>
	<view>
		<view class="top">

			<view>
				<view class="icon">
					<u-icon name="checkmark-circle-fill" color="darkred" width="17" height="17" size="17"></u-icon>
				</view>
				<text>30天无忧退货</text>
			</view>
			<view>
				<view class="icon">
					<u-icon name="checkmark-circle-fill" color="darkred" width="17" height="17" size="17"></u-icon>
				</view>
				<text>48小时快速退费</text>
			</view>
			<view>
				<view class="icon">
					<u-icon name="checkmark-circle-fill" color="darkred" width="17" height="17" size="17"></u-icon>
				</view>
				<text>满88元免邮费</text>
			</view>
		</view>
		<view class="carts" v-for="(item,index) in cartList">
			<view class="checkboxstyle">
				<u-checkbox-group>
					<u-checkbox size="40rpx" :checked="item.checked==1?true:false" :disabled="!addshow"
						@change="cartchecked(item.checked,item.product_id)" shape="circle">
					</u-checkbox>
				</u-checkbox-group>
			</view>






			<u-swipe-action>
				<u-swipe-action-item :options="options1" @click="deleteCart(item.product_id)">
					<view class="cart-in">
						<image :src="item.list_pic_url" mode="widthFix"></image>
						<view class="cart-left">
							<view class="top">
								<text>{{item.goods_name}}</text>
							</view>
							<view class="bottom">
								<text>{{item.market_price | priceFormat}}</text>
								<text>x{{item.number}}</text>
							</view>
						</view>
						<view class="add" v-show="!addshow">
							<u-number-box
								@change="changeNumber(item.goods_id,item.id,item.number,item.product_id,$event)"
								:value="item.number" :min="1" :max="100" button-size="28"></u-number-box>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>

		</view>
		<view class="footer">
			<view class="box">
				<view class="edit">
					<view class="edit-in">
						累计共{{cartList.length}}件商品，可点击<button @click="isaddshow" :class="addshow?'btn1':'btn2'"
							v-text="addshow?'编辑':'完成编辑'"></button>按钮进行商品数量修改
					</view>
				</view>
				<view class="box1">
					<view class="box2">
						<u-checkbox-group>
							<u-checkbox :disabled="!addshow" size="40rpx" :checked="checkAll" @change="changeAll"
								shape="circle">
							</u-checkbox>
						</u-checkbox-group>
						<text>全选</text>
					</view>
					<view class="box3">
						<view>合计: <text> {{total | priceFormat}}</text></view>
					</view>
					<view class="buy">
						<button @click="showToast">立即购买</button>
					</view>


					<u-toast ref="uToast">
					</u-toast>
				</view>

			</view>
		</view>

		<custombar></custombar>
	</view>
</template>

<script>
	import {
		APICart,
		APICheck,
		APIdelete,
		APIadd
	} from "../../utils/api.js"
	import custombar from "@/custom-tab-bar/index.vue"
	export default {
		data() {
			return {
				checkAll: true,
				cartList: [],
				checklist: [],
				addshow: true,
				edit: "编辑",
				options1: [{
					text: '删除',
					style: {
						backgroundColor: 'red'
					}
				}]
			}
		},

		methods: {
			showToast() {
				this.$refs.uToast.show({
					type: 'default',
					message: "该功能暂未开放",
				})
			},
			//改变步进器
			async changeNumber(goods_id, id, number, product_id, e) {
				let token = uni.getStorageSync('X-Nideshop-Token')

				let res = await APIadd({
					goodsId: goods_id,
					id: id,
					number: e.value,
					productId: product_id
				}, {
					"X-Nideshop-Token": token
				})
				this.shopCart();
				console.log(e);
				console.log(res);
			},
			//展示编辑
			isaddshow(e) {
				this.addshow = !this.addshow
			},
			//删除
			async deleteCart(id) {
				let token = uni.getStorageSync('X-Nideshop-Token')
				let res3 = await APIdelete({
					productIds: String(id)
				}, {
					"X-Nideshop-Token": token
				})
				this.shopCart();
				// console.log(res3);
				// console.log(id);
			},
			//单选
			//选中状态
			async cartchecked(ischecked, product_id) {
				console.log(ischecked, String(product_id));
				let token = uni.getStorageSync('X-Nideshop-Token')
				let res2 = await APICheck({
					isChecked: ischecked == 1 ? 0 : 1,
					productIds: product_id
				}, {
					"X-Nideshop-Token": token
				})
				this.shopCart()
				// console.log(res2.data);
			},

			//获取用户购物车
			async shopCart() {
				let token = uni.getStorageSync('X-Nideshop-Token')
				let res = await APICart({
					"X-Nideshop-Token": token
				})
				this.cartList = res.data.cartList;
				this.checklist = this.cartList.map(item => item.checked)
				this.checkAll = !this.checklist.includes(0)
				console.log(res.data.cartList);
				// console.log(this.checklist, this.checkAll);

			},
			//全选反选
			changeAll(e) {
				this.checkAll = e
				this.checkid = this.cartList.map(item => item.product_id)
				this.cartchecked(e == false ? 1 : 0, String(this.checkid))
			},

		},
		computed: {
			total() {
				return this.cartList.reduce((pre, cur) => {
					return pre += cur.checked == 1 ? cur.market_price * cur.number : 0
				}, 0)
			}
		},
		onShow() {

			this.$store.commit("changeTabBarIndex", 3)
			this.shopCart()

		},

		components: {
			custombar
		}
	}
</script>

<style lang="less">
	.top {
		width: 100%;
		height: 60rpx;
		background-color: #efefef;
		justify-content: space-between;
		display: flex;
		font-size: 26rpx;

		view {
			font-size: 26rpx;
			display: flex;
			box-sizing: border-box;
			height: 60rpx;
			align-items: center;


			.icon {
				margin-left: 20rpx;
				width: 34rpx;
				height: 34rpx;
			}

			text {
				text-align: center;
			}
		}
	}

	.carts {
		margin: auto;
		width: 95%;
		height: 250rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.checkboxstyle {}

		.cart-in {
			height: 230rpx;
			width: 646rpx;
			background-color: #FAFAFA;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			.add {
				width: 100%;
				height: 56rpx;
				display: flex;
				align-items: center;
				// border: 1px solid #000;
				background-color: #FAFAFA;

				.u-number-box {
					margin-left: 65%;
				}

			}

			image {
				width: 176rpx;
				height: 176rpx;
			}

			.cart-left {
				flex: 1;
				height: 176rpx;

				.top {
					width: 100%;
					height: 72rpx;

					display: flex;
					align-items: center;

					text {
						font-weight: 500;
						width: 100%;
						font-size: 36rpx;

					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					margin-top: 60rpx;
				}
			}
		}
	}

	.footer {
		width: 100%;
		z-index: 99;

		.box {
			width: 100%;
			position: fixed;
			bottom: 200rpx;
			height: 100rpx;
			background-color: #fff;

			.edit {
				width: 100%;
				height: 96rpx;
				background-color: #fff;

				.edit-in {
					width: 90%;
					height: 100%;
					line-height: 96rpx;
					margin: auto;
					display: flex;
					align-items: center;
					color: #f56723;
					font-size: 24rpx;

					.btn1 {
						display: inline-block;
						color: #fff;
						border-radius: 8rpx;
						background-color: #07c160;
						border: 1px solid #07c160;
						height: 64rpx;
						font-size: 24rpx;
					}

					.btn2 {
						display: inline-block;
						color: #fff;
						border-radius: 8rpx;
						background-color: #ee0a24;
						border: 1px solid #ee0a24;
						height: 64rpx;
						font-size: 24rpx;
					}
				}
			}

			.box1 {
				align-items: center;
				width: 90%;
				height: 103%;
				margin: auto;
				display: flex;
				justify-content: space-between;
				background-color: #fff;

				.box2 {
					display: flex;
					justify-content: space-between;
				}

				.box3 {
					display: flex;
					font-size: 28rpx;
					margin-right: 100rpx;

					text {
						color: red;
					}
				}

				.buy {
					position: absolute;
					right: 10rpx;

					button {

						background-color: red;
						font-size: 30rpx;
						color: #fff;
						border-radius: 1998rpx;
						height: 80rpx;
						width: 220rpx;
					}
				}
			}
		}
	}
</style>
